<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>椿深 · 个人主页</title>
		<link rel="icon" href="https://q1.qlogo.cn/g?b=qq&nk=2258878405&s=640" type="image/x-icon" />
		<link rel="shortcut icon" href="https://q1.qlogo.cn/g?b=qq&nk=2258878405&s=640" type="image/x-icon" />
		<style>
			:root {
				--main-color: #6c63ff;
				--text-color: #333;
				--bg-gradient: linear-gradient(to right, #e0e7ff, #f8f9ff);
				--dark-bg: #333;
				--dark-text: #fff;
			}

			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			body {
				font-family: "Segoe UI", "Noto Sans SC", sans-serif;
				background: var(--bg-gradient);
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100vh;
				padding: 1rem;
				color: var(--text-color);
				transition: background 0.5s ease, color 0.5s ease;
			}

			.card {
				background: white;
				padding: 2.5rem;
				border-radius: 1.5rem;
				box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
				max-width: 450px;
				text-align: center;
				transition: transform 0.3s ease, background 0.5s ease;
			}

			.card:hover {
				transform: translateY(-5px);
			}

			.avatar {
				width: 130px;
				height: 130px;
				border-radius: 50%;
				object-fit: cover;
				border: 5px solid var(--main-color);
				margin-bottom: 1.2rem;
				box-shadow: 0 0 0 6px #e6e9ff;
			}

			h1 {
				font-size: 2rem;
				margin-bottom: 0.2rem;
			}

			.role {
				font-size: 1rem;
				color: #888;
				margin-bottom: 1.2rem;
			}

			.bio {
				font-size: 1rem;
				line-height: 1.6;
				margin-bottom: 2rem;
				color: #555;
			}

			.socials {
				display: flex;
				justify-content: center;
				gap: 1rem;
			}

			.socials a {
				text-decoration: none;
				background: var(--main-color);
				color: white;
				padding: 0.6rem 1rem;
				border-radius: 8px;
				font-weight: bold;
				transition: background 0.3s ease, transform 0.2s ease;
			}

			.socials a:hover {
				background: #5848df;
				transform: translateY(-2px);
			}

			/* 更新暗夜模式按钮样式 */
			.dark-mode-btn {
				position: fixed;
				bottom: 20px;
				right: 20px;
				background: linear-gradient(45deg, #ff7d00, #6c63ff);
				color: white;
				border: none;
				padding: 0.8rem;
				border-radius: 50%;
				font-size: 1.5rem;
				/* 缩小按钮 */
				box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
				cursor: pointer;
				transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
			}

			.dark-mode-btn:hover {
				transform: rotate(360deg);
				background: linear-gradient(45deg, #ff7d00, #5848df);
				box-shadow: 0 4px 25px rgba(0, 0, 0, 0.4);
			}

			/* 暗夜模式样式 */
			.dark-mode {
				background: var(--dark-bg);
				color: var(--dark-text);
			}

			/* 暗夜模式下更新 .bio 的字体颜色 */
			.dark-mode .bio {
				color: #e3e3e3;
				/* 或者选择任何您认为适合的颜色 */
			}


			.dark-mode .card {
				background: #444;
				box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
			}

			.dark-mode .avatar {
				border: 5px solid #444;
				box-shadow: 0 0 0 6px #666;
			}

			@media (max-width: 480px) {
				.card {
					padding: 2rem 1.5rem;
				}

				.avatar {
					width: 110px;
					height: 110px;
				}
			}
		</style>
	</head>
	<body>
		<div class="card">
			<img class="avatar" src="https://q1.qlogo.cn/g?b=qq&nk=2258878405&s=640" alt="椿深头像" />
			<h1>椿深</h1>
			<div class="role">程序员 / 技术专员</div>
			<p class="bio">
				专注于 Python 自动化与工具开发，喜欢简洁高效的代码风格。正在探索图像识别、Tkinter 工具、跨平台脚本的更多可能性 😄。
			</p>
			<div class="socials">
				<a href="mailto:shop2018@qq.com">📧 邮箱</a>
				<a href="https://github.com/Mec8" target="_blank">💻 GitHub</a>
				<a href="https://blog.tavv.top/" target="_blank">📘 博客</a>
			</div>
		</div>

		<!-- 暗夜模式按钮 -->
		<button class="dark-mode-btn" id="darkModeBtn">🌙</button>

		<script>
			const darkModeBtn = document.getElementById('darkModeBtn');

			// 切换暗夜模式
			darkModeBtn.addEventListener('click', () => {
				document.body.classList.toggle('dark-mode');
				if (document.body.classList.contains('dark-mode')) {
					darkModeBtn.textContent = '🌞'; // 显示太阳图标，表示切换为明亮模式
				} else {
					darkModeBtn.textContent = '🌙'; // 显示月亮图标，表示切换为暗夜模式
				}
			});
		</script>
	</body>
</html>